<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script src="../static/js/echarts.min.js"></script>
    <title>Title</title>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 1200px;height:500px;" align="center"></div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '近一周网页访问次数数据展示'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {},
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: { readOnly: false },
            magicType: { type: ['line', 'bar'] },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          name:'日期',
          type: 'category',
          boundaryGap: false,
          data: ['7-8', '7-9', '7-10', '7-11', '7-12', '7-13', '7-14']
        },
        yAxis: {
          name:'人数',
          type: 'value',
          axisLabel: {
            formatter: '{value}'
          }
        },
        series: [
          {
            name: '白天',
            type: 'line',
            data: [9, 10, 13, 11, 8, 9, 11],
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            }
          },
          {
            name: '夜间',
            type: 'line',
            data: [2, 4, 5, 3, 1, 3, 4],
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            }
          }
        ]
      };
      myChart.setOption(option);
    </script>
  </body>
</html>